<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- "The Mark of the Web" below disables the IE6/XPsp2 "information bar". -->
<!-- saved from url=(0014)about:internet -->
<!--
=============================================================================
    test/test.html
    Copyright (C) 2008, Donald W. Griffin
    All rights reserved.
    [MIT license :: see license.txt for details]
=============================================================================
-->
<html>
<head>
  <title>Jibits Test Page</title>
  <link href="test.css" rel="stylesheet">

  <script src="../zjs/json2.js"></script>
  <script src="../zjs/zjs/core.js" id="zjs.core"></script>
  <script src="../zjs/zjs/ext.js" id="zjs.ext"></script>
  <script src="../zjs/zjs/text.js" id="zjs.text"></script>
  <script src="../zjs/zjs/browser.js" id="zjs.browser"></script>
  <script src="../zjs/zjs/ajax.js" id="zjs.ajax"></script>
<!--  <script src="../zjs/zjs/import.js" id="zjs.import"></script>-->

  <script src="../src/jibits/html.js" id="jibits.html"></script>
  <script src="../src/jibits/geom.js" id="jibits.geom"></script>
  <script src="../src/jibits/dom.js" id="jibits.dom"></script>
  <script src="../src/jibits/template.js" id="jibits.template"></script>
  <script src="../src/jibits/events.js" id="jibits.events"></script>
  <script src="../src/jibits/drag.js" id="jibits.drag"></script>
  <script src="../src/jibits/widget.js" id="jibits.widget"></script>
  <script src="../src/jibits/popup.js" id="jibits.popup"></script>
  <script src="../src/jibits/dialog.js" id="jibits.dialog"></script>
  <script src="../src/jibits/grid.js" id="jibits.grid"></script>

  <script id="test.base">
      $module("test.base");
      $namespace("test");
  </script>

  <script src="placementTest.js"></script>
  <script src="dialogTest.js"></script>
  <script src="dragTest.js"></script>
  <script src="gridTest.js"></script>

  <script>
    var dialog;

    function init ()
    {
        test.initDrag("dragbox", "draglog");
        //alert("classes:" + $elem("dialog1").className.split(" ").join(","));
        jibits.parseDocument();
        //alert("classes:" + $elem("dialog1").className.split(" ").join(","));

        setupVScroller();
    }

    function setupVScroller ()
    {
        var inner = $elem("vscroller_inner");
        var outer = $elem("vscroller");
        var tbl = $elem("testgrid"), ht = -tbl.parentNode.offsetHeight;
        /*$foreach(tbl.tBodies, function (tbody)
        {
            ht += tbody.offsetHeight;
        });*/
        ht += tbl.offsetHeight;
        inner.style.height = outer.offsetHeight + ht + "px";
    }

    function handleScroll(event)
    {
        var el = $elem("scroller");
        //console.info("event:" + event.type + " offset="+el.scrollLeft);
        var tbl = $elem("gridbox");
        //var tbl = $elem("testgrid");
        tbl.scrollLeft = el.scrollLeft;
    }

    function handleVScroll(event)
    {
        var el = $elem("vscroller");
        //console.info("event:" + event.type + " offset="+el.scrollTop);
        var tb = $elem("testgrid").tBodies[0];
        //var tb = $elem("gridbox");
        tb.scrollTop= el.scrollTop;
    }

    function showDialog ()
    {
        if (!dialog)
            //dialog = new test.Dialog1("dialog1");
            dialog = $widget("dialog1");

        dialog.execute();
    }
  </script>
</head>

<body onload="init()">
    <p>Focus:<span id="focused"></span></p>
    <script>zjs.browser.addDecorations(document.body);</script>
    <select style="width:100%;"><option label="foo"></select>
    <button onclick="showDialog()">Show Dialog</button>
    <div id="dragins" class="dragIns" style="display:none;"></div>
    <div id="dragbox" class="dragBox">Drag</div>
    <p class="hoverhack=1">Drag log:</p>
    <textarea id="draglog" style="width: 500px; height: 200px;"></textarea>
    <button onclick="$elem('draglog').value=''">Clear</button>
    <br><br>

<!--
    <div id="gout">
        <div id="ghdr" style="width:200px;">
            <table>
                <tr><th>A</th><th>B</hd><th>C</th></tr>
            </table>
        </div>
        <div id="gbod">
            <table>
                <tr><td>hello there</td><td>hello there</td><td>hello there</td></tr>
                <tr><td>hello there</td><td>hello there</td><td>hello there</td></tr>
                <tr><td>hello there</td><td>hello there</td><td>hello there</td></tr>
                <tr><td>hello there</td><td>hello there</td><td>hello there</td></tr>
                <tr><td>hello there</td><td>hello there</td><td>hello there</td></tr>
                <tr><td>hello there</td><td>hello there</td><td>hello there</td></tr>
            </table>
        </div>
    </div>
-->
    <!-- Widgets -->
    <input type="checkbox" onclick="test.fixGridHeader(this.checked)">Fixed Header
    <input type="checkbox" onclick="test.fixGridLeftCol(this.checked)">Fixed Left Column
    <div id="testgrid_scrollbox" style="width:200px; height:120px;">
    <table id="testgrid"
           class="grid widget=jibits.Grid@test.gridConfig sortColumns=3">
        <tr>
            <th id="hdr0">#<div class="sortIndicator"></div></th>
            <th id="hdr1">Column1<div class="sortIndicator"></div></th>
            <th id="hdr2">Column2<div class="sortIndicator"></div></th>
            <th id="hdr3">Column3<div class="sortIndicator"></div></th>
            <th id="hdr4">Column4<div class="sortIndicator"></div></th>
            <th id="hdr5">&nbsp;<div class="sortIndicator"></div></th>
<!--
            <th id="hdr0"><div
                style="position:relative;width:100%;height:100%;">#<div
                class="sortIndicator"></div></div></th>
            <th id="hdr1"><div
                style="position:relative;width:100%;height:100%;">Column1<div
                class="sortIndicator"></div></div></th>
            <th id="hdr2"><div
                style="position:relative;width:100%;height:100%;">Column2<div
                class="sortIndicator"></div></div></th>
            <th id="hdr3"><div
                style="position:relative;width:100%;height:100%;">Column3<div
                class="sortIndicator"></div></div></th>
            <th id="hdr4"><div
                style="position:relative;width:100%;height:100%;">Column4<div
                class="sortIndicator"></div></div></th>
            <th id="hdr5"><div
                style="position:relative;width:100%;height:100%;">&nbsp;<div
                class="sortIndicator"></div></div></th>
-->
        </tr>
        <tr>
            <td id="col0">#{$index}</td>
            <td id="col1">#{val1}</td>
            <td id="col2">#{val2}</td>
            <td id="col3">#{val3}</td>
            <td id="col4">#{val4}</td>
            <td><img id="image"></td>
        </tr>
    </table>
    </div>
    <div id="scroller" style="width:400px; overflow-x:scroll;"
onscroll="handleScroll(event)">
        <div style="width:700px; height:20px;"></div>
    </div>
    <div id="vscroller" style="height:90px; width:20px; overflow-y:scroll;"
onscroll="handleVScroll(event)">
        <div id="vscroller_inner" style="height:790px;"></div>
    </div>
    <br><br>

    <div id="popup1" class="popup widget=test.PlacementTester ref='pop1'"
                     style="display:none;"></div>
    <div id="dialog1" class="dialog widget=test.Dialog1" style="display:none;">
        <h1>Dialog</h1>
        <br>
        <div id="pop1" class="popBox"></div>
        <div class="buttons">
            <input id="ok1" type="button" value=" OK ">
            <input id="cancel1" type="button" value=" Cancel ">
            <input id="dlg1" type="button" value=" Dlg ">
        </div>
    </div>
    <div id="dialogTemplate" style="display:none;"
             class="dialog widget=jibits.Template@test.dialogTemplateCfg">
        <h1 id="caption">#{title}!</h1>
        <br>
        <input type="text" id="edit">
        <div id="pop" class="popBox"></div>
        <table id="testgrid2"
               class="grid widget=jibits.Grid@test.gridConfig2">
            <tr>
                <th id="hdr0b">#</th>
                <th id="hdr1b">Column1</th>
                <th id="hdr4b">Column4</th>
                <th id="hdr5b">&nbsp;</th>
            </tr>
            <tr>
                <td id="col0b">\#{$index}</td>
                <td id="col1b">\#{val1}</td>
                <td id="col4b">\#{val4}</td>
                <td><img id="image2"></td>
            </tr>
        </table>
        <div class="buttons">
            <input id="ok" type="button" value=" OK ">
            <input id="cancel" type="button" value=" Cancel ">
        </div>
    </div>
</body>
</html>
